<template>
  <div class="plan-detail" v-loading="loading">
    <div class="operate-btn">
      <div @click="back">返回</div>
      <div class="submit" @click="submitInfo">提交信息</div>
    </div>

    <el-card shadow="hover" style="margin-top: 20px">
      <el-form :model="planForm" :rules="rules" label-width="80px" ref="demoFormRef">
        <el-form-item label="出访日期" prop="visitDate">
          <el-date-picker clearable v-model="planForm.visitDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择出访日期"> </el-date-picker>
        </el-form-item>
        <el-form-item label="出访人" prop="visitorName" v-if="planForm.id">
          <el-input v-model="planForm.visitorName" placeholder="请输入出访人" disabled />
        </el-form-item>
        <el-form-item label="出访时间" prop="visitTime">
          <el-input v-model="planForm.visitTime" placeholder="请输入出访时间" />
        </el-form-item>
        <el-form-item label="出访对象" prop="visiteesName">
          <el-input v-model="planForm.visiteesName" placeholder="请输入出访对象" />
        </el-form-item>
        <el-form-item v-if="peersNameList.length" label="同行人员">
          <el-tag v-for="(item, index) of peersNameList" :key="index" style="margin-right: 10px">{{item}}</el-tag>
        </el-form-item>
        <el-form-item v-if="planForm.isJoin === 'Y'">
          <el-button type="danger" @click="joinBtn">
            <el-icon style="vertical-align: middle">
              <Select />
            </el-icon>
            <span>{{ planForm.isJoin === 'Y' ? '加入' : '退出' }}</span>
          </el-button>

          <el-button type="danger" @click="exitBtn" v-if="planForm.isJoin === 'N'">
            <el-icon style="vertical-align: middle">
              <Select />
            </el-icon>
            <span>退出</span>
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import {defineComponent, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {exitPeers, joiningPeers, planDetail, savePlan, updatePlan} from "@/api/plan";
import {FormInstance} from "element-plus";

const route = useRoute();
const router = useRouter();
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const date = route.query.date as string;
const id = route.query.id as string;
const loading = ref(false);
const initForm = () => {
  return {
    id: '',
    isJoin: '',
    visitDate: date,
    visitTime: '',
    visiteesName: '',
    peersName: '',
    visitorName: '',
    peersNameList: []
  }
};
const demoFormRef = ref<FormInstance>();
const planForm = ref(initForm());
const rules = {
  visitTitle: {required: true, message: '请输入拜访标题', trigger: 'blur'},
  visitDate: {required: true, message: '请选择拜访日期', trigger: 'blur'},
  visitorName: {required: true, message: '请输入出访人', trigger: 'blur'},
  visiteesName: {required: true, message: '请输入出访对象', trigger: 'blur'},
  peersName: {required: true, message: '请输入同行人员', trigger: 'blur'}
};
const peersNameList = ref<string[]>([]);

function back() {
  router.back()
}

async function joinBtn() {
  try {
    await proxy?.$modal.confirm('是否确认加入该拜访计划？')
    const data = await joiningPeers({id: planForm.value.id})
    if (data.code === 200) proxy?.$modal.msgSuccess('加入成功')
    back()
  } catch (error) {
    console.log(error)
  }
}

async function exitBtn() {
  try {
    await proxy?.$modal.confirm('是否确认退出该拜访计划？')
    const data = await exitPeers({id: planForm.value.id})
    if (data.code === 200) proxy?.$modal.msgSuccess('退出成功')
    back()
  } catch (error) {
    console.log(error)
  }
}

function submitInfo() {
  demoFormRef.value?.validate((valid) => {
    if (valid) {
      if (planForm.value.id) {
        updatePlan(planForm.value).then((res: any) => {
          if (+res.code === 200) {
            proxy?.$modal.msgSuccess("修改成功");
            back()
          }
        })
      } else {
        savePlan(planForm.value).then((res: any) => {
          if (+res.code === 200) {
            proxy?.$modal.msgSuccess("新增成功");
            back()
          }
        })
      }
    }
  })
}

function getDetail() {
  if (!id) return
  loading.value = true;
  planDetail(id).then((res: any) => {
    planForm.value = res.data;
    const arr = planForm.value.peersNameList || [];
    peersNameList.value = [];
    arr.forEach((item: Record<string, string>) => {
      peersNameList.value.push(...Object.values(item))
    })
  }).finally(() => loading.value = false)
}

getDetail()
defineComponent({name: 'planIndex'})
</script>

<style scoped lang="scss">
.plan-detail {
  width: 100%;
  height: auto;
  margin-top: 60px;
  padding: 0 30px;

  .operate-btn {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    padding-right: 210px;
    display: flex;
    justify-content: end;
    align-items: center;
    background-color: #fff;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
    z-index: 99;

    div {
      width: 140px;
      height: 50px;
      margin-left: 30px;
      text-align: center;
      font-size: 16px;
      color: #FF4350;
      line-height: 48px;
      border-radius: 10px;
      border: 1px solid #FF4350;
      cursor: pointer;
    }

    .submit {
      color: #fff;
      border: none;
      background: linear-gradient(296deg, #FF4350 0%, #FF4553 35%, #FFADB3 100%);
    }
  }

  .plan-info {
    display: flex;
    width: 100%;
    height: 360px;
    padding: 20px 56px;

    .info-left {
      width: 250px;
      height: 250px;
      margin-right: 20px;
    }

    .info-right {
      flex: 1;

      .info-title {
        height: 48px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 34px;
        color: #2E3244;
        line-height: 48px;
        text-align: left;
        font-style: normal;
      }

      .basic-info {

        .basic-title {
          margin: 20px 0;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 20px;
          color: #2E3244;
          line-height: 28px;
          text-align: left;
          font-style: normal;
        }
      }
    }
  }
}
</style>
